<template>
  <yd-layout>
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="收银台" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
    </yd-navbar>

    <div class="m-cart-pay-success-ct">
      <p class="tit">{{payInfo.title}}</p>
      <div class="text-box">
        <p class="ico-success"><yd-icon name="checkoff" color="#fff"></yd-icon></p>
        <div class="tit-box">
          <p class="subtit" v-if="payInfo.origin == 'order'">付款方式：<em>{{payInfo.type}}</em></p>
          <p class="subtit">付款金额：<em>{{payInfo.price | currency}}元</em></p>
        </div>
      </div>
      
      <div class="btn-group">
        <button @click="$router.replace('/')">查看订单</button>
        <button @click="$router.replace('/')">返回首页</button>
      </div>
    </div>

    <section class="m-cart-pay-success-list">
      <article-title color="666" title="商品推荐" :isIcon="false"></article-title>
      <yd-list theme="1">
        <yd-list-item v-for="(goods, index) in recommendList" :key="index" @click.native="$router.replace(`/goods/${goods.gc_id}`)">
          <img slot="img" v-lazy="goods.Path">
          <span slot="title">{{goods.goods_name}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="yd-price"><em>¥</em>{{goods.goods_current_price | currency}}</span>
            </div>
            <div class="scale">月销{{goods.monthlySales || 0}}件</div>
          </yd-list-other>
          <yd-list-other slot="other">
            <div>
              <yd-icon name="shopcart-outline" size=".3rem"></yd-icon>
            </div>
            <div>找相似 》</div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </section>

  </yd-layout>
</template>

<script>
  import { apiRecommendList } from 'js/api'
  import ArticleTitle from '../home/articleTitle'
  import { session } from 'util/storage'

  export default {
    data() {
      return {
        recommendList: [],
        payInfo: {}
      }
    },
    created() {
      this.payInfo = session.get('payInfo') || {}
      apiRecommendList(this.payInfo.id || 3200).then(data => {
        this.recommendList = data.goodsLikeList
      })
    },
    components: {
      ArticleTitle
    },
    destroyed() {
      session.remove('payInfo')
    }
  }
</script>

<style lang="scss">
  .m-cart-pay-success-ct {
    padding-bottom: .4rem;
    text-align: center;
    background: #fff;
    .ico-success {
      display: inline-block;
      vertical-align: middle;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      margin-right: .3rem;
      background: #f00385;
      border-radius: .5rem;
    }
    .tit {
      padding: .5rem 0 .3rem;
      font-size: .4rem;
      color: #f00385;
    }
    .tit-box {
      display: inline-block;
      vertical-align: middle;
    }
    .subtit {
      width: 3rem;
      margin: 0 auto;
      text-align: left;
      line-height: .68rem;
      font-size: .28rem;
      color: #999;
      em {
        color: #333;
      }
    }
    .btn-group {
      margin-top: .4rem;
      button {
        width: 2.4rem;
        height: .56rem;
        border: 1px solid #eee;
        color: #666;
        &:first-child {
          margin-right: .4rem;
        }
      }
    }
  }
  .m-cart-pay-success-list {
    margin-top: .4rem;
    padding: .2rem .2rem .4rem;
    background: #fff;
  }
</style>